/* eslint-disable */
<template>
	<!-- 所有内容包含到下面的div里，不能多层，必须包含到一个div里-->
	<div class="body">
		<van-nav-bar
				title="拍照"
				left-text=""
				right-text=""
				left-arrow
				@click-left="onClickLeft"></van-nav-bar>
		<ul class="menulist">
			<li v-for="item in list" @click="todesc(item)" :key="item.title">
				<mainuiitem :item="item"></mainuiitem>
			</li>
		</ul>
		<div>
			<img :src="item" v-for="(item,index) in bsrcs" :key="index" style="margin: 10px 10px;width: 100px;height: 100px">
			<!--<img :src="bsrc" style="width: 100px;height: 100px">-->
			<!--<img src="" style="width: 100px;height: 100px">-->
		</div>
	</div>
</template>

<script>
	import mainuiitem from '../components/MainUIItem.vue'
	export default {
		name: '',
		data () {
			return {
				list: [],
				bsrcs:[]
			}
		},
		components:{
			mainuiitem
		},
		mounted() {
			this.list.push({title:'拍照',content:'调用相机',url:'./img/pic.png'})
			this.list.push({title:'选择图片',content:'进行图片选择操作',url:'./img/pic.png'})
			this.list.push({title:'预览图片',content:'预览图片',url:'./img/pic.png'})
			this.list.push({title:'扫一扫',content:'打开扫一扫，返回扫描结果',url:'./img/pic.png'})

		},
		methods:{
			onClickLeft(){
				this.$router.go(-1)
			},
			todesc(item){
				let self = this
				if(item.title === "拍照"){
					this.$hesc.device.media.capture({
						custome:true, //true 自定义相机  false 系统相机
						compress:true,//true 进行压缩
						thumbnail:true,//true 优先返回缩略图base64，后台上传图片，false不需要缩略图，直接后台上传图片
						mediaUrl:"http://220.191.224.215/file/file/uploadFiles/",//附件服务器地址
						onThumbnail : function(result) {
							for (let item in result.thumbnails) {
								let hearder = "data:image/jpg;base64,";
								let arrNew = new Array()
								arrNew.push(hearder)
								arrNew.push(result.thumbnails[item])
								self.bsrcs.push(arrNew.join(''))
							}
							/*拍摄图片后返回100*100的缩略图base64编码的字符串
							 {
						            thumbnails：['./9XXXXXXXXXXXXXXXXXX’,'./9xxxxxxx'}]
				             }
						   */

						},
					onSuccess : function(result) {
						alert(JSON.stringify(result))
						/*图片上传成功后返回url地址
						  {
								pics:[
									{path : http://yf.hesc.com.cn/hesc-fileservice/upload/file/2018/04/04/20180404160840998550.jpg}
								]
						  }
						*/
					},
					onFail : function() {}
				})

				}else if(item.title === "选择图片"){
					this.$hesc.device.media.select({
						image:{multiple:true,compress:false,max:9},//multiple true进行多选compress true进行压缩，max最多选9张，如果multiple设置为false，max默认赋值1
						thumbnail:false,//true 优先返回缩略图base64，后台上传图片，false不需要缩略图，直接后台上传图片
						mediaUrl:"http://220.191.224.215/file/file/uploadFiles/",//附件服务器地址
						onThumbnail : function(result) {
							for (let item in result.thumbnails) {
								let hearder = "data:image/png;base64,";
								let arrNew = new Array()
								arrNew.push(hearder)
								arrNew.push(result.thumbnails[item])
								self.bsrcs.push(arrNew.join(''))
							}
							/*拍摄图片后返回100*100的缩略图base64编码的字符串
							 {
						        thumbnails：[{src:’./9XXXXXXXXXXXXXXXXXX’}]
					          }
						   */
						},
					onSuccess : function(result) {
						alert(JSON.stringify(result))
						/*图片上传成功后返回url地址
						  {
							pics:[
								{path : http://yf.hesc.com.cn/hesc-fileservice/upload/file/2018/04/04/20180404160840998550.jpg}
							]
						  }
						*/
					},
					onFail : function(err) {
						alert(JSON.stringify(err))
					}
				})

				}else if(item.title === "预览图片"){
					this.$hesc.biz.util.previewImage({
						urls: ['http://220.191.224.215/upload/file/2020/01/09/20200109093516192499.jpg','http://220.191.224.215/upload/file/2020/01/09/20200109093516261849.jpg','http://220.191.224.215/upload/file/2020/01/09/20200109093516354206.jpg'],//图片地址列表
						current: String,//当前显示的图片链接 可不填
						onSuccess : function(result) {
							alert(JSON.stringify(result))
							/**/
						},
						onFail : function(err) {
							alert(JSON.stringify(err))
						}
					})
				}else if(item.title === "扫一扫"){
					this.$hesc.biz.util.scan({
						type: "qrCode" , // qrCode 二维码 barCode 条形码
						onSuccess: function(data) {
							alert(JSON.stringify(data))
							//onSuccess将在扫码成功之后回调
							/* data结构
							   { 'text': String}
							*/
						},
						onFail : function(err) {
							alert(JSON.stringify(err))
						}
					})

				}

			}
		},
		props:[]

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
	.body{
		width: 100%;
		height: 100%;
		position: relative;
	}
	li{
		position: relative;
		width: 100%;
		box-sizing: border-box;
		padding: 3px;
	}
	li:after{
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		background-color: #c8c7cc;
		content: '';
		transform: scaleY(.5);
	}
</style>
